<template>
    <el-dialog
    title="编辑"
    :visible.sync="editClassData.dialogState"
    size="tiny"
    class="dialog-list"
    @close="close('dataForm')"
    @open="open"
    >
        <el-form v-loading='loading' class="form-content" :model="dataForm" :rules="rules" ref="dataForm" label-width="40px"  label-position='left'>
            <el-row class="school-item">
                <el-col :span="24">
                    <el-form-item label="荣誉" prop="honor" :rules="rules.honor">
                        <el-popover
                        placement="top-start"
                        trigger="focus" 
                        content="长度在20个字符以内。">
                            <el-input v-model="dataForm.honor" slot="reference" :maxlength="20" placeholder="请输入"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="职务" prop="duty" :rules="rules.honor">
                        <el-popover
                        placement="top-start"
                        trigger="focus" 
                        content="长度在20个字符以内。">
                            <el-input v-model="dataForm.duty" slot="reference" :maxlength="20" placeholder="请输入" ></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('dataForm')"> 取 消 </el-button>
            <el-button type="primary" @click="submitForm('dataForm')"> 确 定 </el-button>
        </div>
    </el-dialog>
</template>

<script>

    import { updateStudentClassInfo } from 'api/studentMange';
    export default {
        props: {
            editClassData: {
                default() {
                    return {
                        dialogState: false,
                        classId: '',
                        studentId: '',
                        honor: '',
                        business: ''
                    }
                },
                required: true
            }
        },
        data() {
            return {
                loading: false,
                dataForm: {
                    honor: null,
                    duty: null
                },
                rules: {
                    honor: [
                        { min: 1, max: 20, message: '长度在20个字符以内', trigger: 'blur' }
                    ]
                }
            }
        },
        // created() {

        // },
        computed: {
            
        },
        methods: {
            open() {
                this.dataForm.honor = this.editClassData.honor;
                this.dataForm.duty = this.editClassData.business;
            },
            submitForm(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        let classId = this.editClassData.classId;
                        let studentId = this.editClassData.studentId;
                        let honor = this.dataForm.honor;
                        let buesiness = this.dataForm.duty;
                     
                        updateStudentClassInfo(classId, studentId, honor, buesiness).then(response => {
                            this.loading = false;
                            if (response.data.status == 200) {
                                this.$message.success(response.data.errorMsg);
                                this.$emit('search');
                                this.editClassData.dialogState = false;
                                this.$refs[dataForm].resetFields();
                            } else {
                                 this.$message.error(response.data.errorMsg);
                            }
                            
                        }).catch(e => {
                            this.loading = false;
                        });
                    }
                })
            },
            resetForm(dataForm) {
                this.editClassData.dialogState = false;
                this.$refs[dataForm].resetFields();
            },
            close(dataForm) {
                this.editClassData.dialogState = false;
                this.$refs[dataForm].resetFields();
            }
        }
    }

</script>

<style lang="scss" scoped>
    .dialog-list{
        .form-content{
            width: 90%;
            margin: 0 auto; 
        }
        .dialog-footer{
            margin: 0 auto; 
            text-align:center;
           
        }
    }
</style>